<template>
    <view class="list">
        <wd-drop-menu custom-class="custom-menu">
            <wd-drop-menu-item v-model="value" :options="option" @change="handleChange" />
            <wd-drop-menu-item title="天数/出发日期" ref="dateDropMenu" @opened="handleOpened('date')" custom-popup-class="custom_popup">
                <view class="main">
                    <view class="days_list">
                        <view class="title">游玩天数（多选）</view>
                            <scroll-view class="scroll-view" scroll-x="true">
                                <wd-checkbox-group v-model="daysChecked" @change="daysChange">
                                    <wd-checkbox
                                        v-for="(i, idx) in days"
                                        :key="idx"
                                        shape="button"
                                        :model-value="i"
                                        custom-class="checkbox-item"
                                    >
                                        {{ i === 15 ? "15天及以上" : `${i}天`  }}
                                    </wd-checkbox>
                                </wd-checkbox-group>
                            </scroll-view>
                    </view>
                    <scroll-view class="data_view" scroll-x="false" scroll-y="false">
                        <view class="title">
                            出发日期
                        </view>
                        <wd-calendar-view type="daterange" allow-same-day :min-date="minDateTimestamp" show-panel-title v-model="dateValue" @change="dateChange" />
                    </scroll-view>
                    <view class="btns">
                        <button class="btn" @click="handleClear">清空</button>
                        <button class="btn" @click="confirm">查看</button>
                    </view>
                </view>
            </wd-drop-menu-item>
            <wd-drop-menu-item title="价格区间" ref="priceDropMenu" @opened="handleOpened('price')">
                <view class="price_list">
                    <view class="title">价格区间:{{ selectedOption }}</view>
                    <view class="price_content">
                        <wd-radio-group v-model="selectedOption" @change="handlePriceChange">
                            <wd-radio
                            v-for="(option, index) in priceOptions"
                            :key="index"
                            :value="option"
                            shape="button"
                            class="price-option"
                            >
                                {{ option }}
                            </wd-radio>
                        </wd-radio-group>
                    </view>
                <view class="btns">
                    <button class="btn" @click="handleClear">清空</button>
                    <button class="btn" @click="confirm">查看</button>
                </view>
            </view>
            </wd-drop-menu-item>
            <wd-drop-menu-item title="筛选" ref="filterDropMenu" @opened="handleOpened('filter')">
                <view>
                    <wd-cell title="标题文字" value="内容" />
                    <wd-cell title="标题文字" label="描述信息" value="内容" />
                    <view class="btns">
                        <button class="btn" @click="handleClear">清空</button>
                        <button class="btn" @click="confirm">查看</button>
                    </view>
                </view>
            </wd-drop-menu-item>
        </wd-drop-menu>
    </view>
</template>

<script lang="ts" setup>
import { ref ,onMounted ,defineEmits} from 'vue';

defineOptions({
    options: {
        styleIsolation: 'shared'
    }
})
const emit = defineEmits(['submitSelection','checkSort']);
const activeMenu = ref<string | null>(null);
const dateDropMenu = ref();
const priceDropMenu = ref();
const filterDropMenu = ref();

const value = ref<number>(0);
const option = ref<Record<string, any>[]>([
    { label: '价格升序', value: 0 },
    { label: '价格降序', value: 1 },
]);
const days = ref(Array.from({ length: 15 }, (_, index) => index + 1));
const daysChecked = ref<number[]>([]);
const priceOptions = ref([
  '¥200以下',
  '¥200-¥300',
  '¥300-¥400',
  '¥400-¥500',
  '¥500-¥600',
  '¥600-¥700',
  '¥800-¥1000',
  '¥1000以上'
]);
const selectedOption = ref(priceOptions.value[0]);

const minPrice = ref();
const maxPrice = ref();
const handleChange = ({ value }) => {
   const sort = value;
    emit('checkSort', sort);
};
const daysChange =(e)=>{
console.log('改变选中',e.value);
}
const dateValue = ref([]);
const minDateTimestamp = ref(0);
const dateChange =(e)=>{
    console.log('选择日期',e,e.value);
    
}
const updateSliders = () => {
  const selected = selectedOption.value;
  let min = 0;
  let max = 200;

  if (selected.includes('以下')) {
    max = selected.split('¥')[1].replace('以下', '');
  } else if (selected.includes('以上')) {
    min = selected.split('¥')[1].replace('以上', '');
    max = Infinity;
  } else {
    const range = selected.split('-');
    min = range[0].replace('¥', '');
    max = range[1].replace('¥', '');
  }

  minPrice.value = Number(min);
  maxPrice.value = Number(max);
};

const handlePriceChange = (e) => {
  console.log('价格区间改变', e);
  updateSliders()
};
const confirm = () => {
    const selectedValues = {
        travelDays: daysChecked.value, // 游玩天数
        dateRange: dateValue.value, // 日期范围
        priceRange: [minPrice.value, maxPrice.value]
    };
    
    // 关闭当前激活的菜单
    const menuMap = {
        date: dateDropMenu,
        price: priceDropMenu,
        filter: filterDropMenu
    };
    menuMap[activeMenu.value]?.value?.close();
    emit('submitSelection', selectedValues); // 将筛选条件传递给父组件
};

const handleClear = () => {
    // 根据当前激活的菜单类型关闭对应弹窗
    switch (activeMenu.value) {
        case 'date':
            daysChecked.value = [];
            dateValue.value = [];
        break;
        case 'price':
            selectedOption.value = '';
        break;
        case 'filter':
        filterDropMenu.value?.close();
        break;
    }
};

const handleOpened = (type: string) => {
  activeMenu.value = type; // 记录当前打开的菜单类型
};
// 在组件挂载时计算当前日期
onMounted(() => {
    console.log('加载完成');
    
    const now = new Date();
    minDateTimestamp.value = now.getTime();
    // const year = now.getFullYear();
    // const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
    // const day = String(now.getDate()).padStart(2, '0');
    // today.value = `${year}-${month}-${day}`; // 格式化为 YYYY-MM-DD
});
</script>

<style lang="scss" scoped>
.list {
    margin-top: 20rpx;

    :deep(.wd-drop-menu__list) {
        background-color: transparent;
        justify-content: space-between;
    }

    :deep(.wd-drop-menu__item) {
        width: auto;
        flex: none;
        white-space: nowrap;
    }

    :deep(.wd-drop-menu__item-title) {
        width: max-content;
        padding: 0 30rpx 0 0;
    }

    :deep(.wd-drop-menu__item-title-text) {
        font-size: 26rpx;
    }

    :deep(.wd-icon) {
        font-size: 40rpx !important;
    }

    :deep(.is-active) {
        color: #AA5413;
        ::after {
            display: none;
        }
    }
    .main {
        width: 750rpx;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0 20rpx 120rpx;
        .title{
            font-weight: bold;
        }
    }

    .days_list {
        width: 100%;
        box-sizing: border-box;
    }

    .scroll-view {
        width: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        :deep(.wd-checkbox-group) {
            display: inline-flex;
            white-space: nowrap;
        }
        :deep(.wd-checkbox) {
            padding-right: 0;
        }
        :deep(.wd-checkbox__label) {
            padding: 5rpx 10rpx;
            width: 100rpx ; 
            height: 60rpx ;
            border-radius: 10rpx;
        }
    }
    :deep(.wd-month-panel__container){
        height: 290rpx !important;
    }
    :deep(.wd-popup){
        padding-top: 20rpx;
        padding-bottom: 120rpx;
        position: relative;
    }
    .data_view{
        margin-top: 20rpx;
    }
    .price_list{
        padding: 0 20rpx 140rpx;
        .title{
            font-weight: bold;
        }
        :deep(.wd-radio-group){
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .wd-radio{
                &:nth-child(3n){
                    margin-right: 0;
                }
            }
            .wd-radio__label{
                width: calc((750rpx - 80rpx)/3);
                background: #eeefe7;
                margin-top: 30rpx;
                
            }
        }
    }
    .btns {
        display: flex;
        align-items: center;
        height: 120rpx;
        padding: 20rpx;
        justify-content: space-between;
        z-index: 13;
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1rpx solid #ccc;
        bottom: 0;
        left: 0;
        .btn {
            flex: 1;

            &:nth-child(2) {
                background-color: #1B9C61;
                margin-left: 30rpx;
                color: #fff;
            }
        }
    }
}
</style>    